A Comprehensive Guide to HTML Tables

Published 1 month ago

Introduction

HTML tables are a fundamental part of web development, used to display structured data in rows and columns. In this guide, we will explore how to create tables, use attributes, apply rowspan and colspan, and style tables with CSS to enhance their appearance.

1. Creating Tables in HTML

A basic HTML table is created using the <table> tag, with table rows (<tr>) and table cells (<td>). If you need header cells, you use <th> instead of <td>.

Example:

<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
</table>

Explanation:

<table>: Defines the table.
<tr>: Defines a table row.
<th>: Defines a table header cell (bold and centered by default).
<td>: Defines a table data cell.

2. Table Attributes

Several attributes can be used to adjust the appearance and behavior of tables.

Common Table Attributes:

border: Defines the thickness of the table border.
cellspacing: Sets the space between table cells.
cellpadding: Defines space inside each table cell.

Example:

<table border="1" cellspacing="5" cellpadding="10">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
</table>

3. Using Rowspan and Colspan

Sometimes, you may need to merge table cells to span multiple rows or columns.

Rowspan (Merging Rows)

The rowspan attribute allows a cell to span multiple rows.

<table border="1">
    <tr>
        <th>Name</th>
        <th rowspan="2">Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>New York</td>
    </tr>
</table>

Colspan (Merging Columns)

The colspan attribute allows a cell to span multiple columns.

<table border="1">
    <tr>
        <th colspan="2">Full Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>25</td>
    </tr>
</table>

4. Styling Tables with CSS

To enhance the look of tables, you can use CSS.

Example:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
</style>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
        <td>Los Angeles</td>
    </tr>
</table>

Key CSS Properties:

border-collapse: collapse; → Merges table borders.
padding → Adds space inside cells.
background-color → Sets background colors.
nth-child(even) → Colors alternate rows for readability.

Conclusion

HTML tables are a powerful way to organize data on a webpage. By using <table>, <tr>, <td>, and <th>, along with attributes like border, cellspacing, and cellpadding, you can structure your tables effectively. Additionally, rowspan and colspan help merge cells for better layout, while CSS can be used to style tables professionally.

With this guide, you are now equipped to create and style HTML tables efficiently!

Obafemi Emmanuel